<template>
  <div class="search">
    <div class="col" v-for="(labelItem, index) in props.labelOption" :key="index">
      <slot
        :text="labelItem.name"
        :record="searchOption"
        :row="labelItem"
        :index="index"
        :name="`label${labelItem.key}`"
        v-if="labelItem.type !== 'Radio'"
      >
        <label
          v-if="labelItem.name"
          :style="{
            width: labelItem.name ? (labelItem.labelWidth || 100) + 'px' : 0 + 'px',
          }"
        >
          {{ labelItem.name }}：
        </label>
      </slot>
      <slot
        :key="labelItem.key"
        :row="labelItem"
        :record="searchOption"
        :index="index"
        :name="`input${labelItem.key}`"
      >
        <a-range-picker
          v-if="labelItem.type == 'Time'"
          :show-time="{ format: 'HH:mm' }"
          allowClear
          v-model:value="props.searchOption[labelItem.key]"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['开始时间', '结束时间']"
          :style="{ width: (labelItem.inputWidth || 300) + 'px' }"
          :disabled="labelItem.disabled || disabled"
        />
        <a-radio-group
          v-else-if="labelItem.type == 'Radio'"
          v-model:value="props.searchOption[labelItem.key]"
          :disabled="labelItem.disabled || disabled"
        >
          <a-radio-button :value="item.value" v-for="item in labelItem.selectOption">
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>

        <a-input
          v-else-if="!labelItem.selectOption"
          :style="{ width: (labelItem.inputWidth || 200) + 'px' }"
          v-model:value="props.searchOption[labelItem.key]"
          :placeholder="labelItem.placeholder || '请输入'"
          :disabled="labelItem.disabled || disabled"
        />

        <a-select
          v-else-if="labelItem.type == 'Select'"
          v-model:value="props.searchOption[labelItem.key]"
          :options="labelItem.selectOption"
          :filter-option="filterOption(index)"
          :field-names="labelItem.fieldNames || {}"
          show-search
          :mode="labelItem.mode"
          :style="{ width: (labelItem.inputWidth || 200) + 'px' }"
          :placeholder="labelItem.placeholder || '请选择'"
          :disabled="labelItem.disabled || disabled"
          allowClear
        />
        <a-select
          v-else
          :style="{ width: (labelItem.inputWidth || 200) + 'px' }"
          v-model:value="props.searchOption[labelItem.key]"
          :options="labelItem.selectOption"
          :placeholder="labelItem.placeholder || '请选择'"
          :disabled="labelItem.disabled || disabled"
          allowClear
        />
      </slot>
    </div>
    <a-button
      style="margin: 0 20px 0 20px; background: #136cc4; border-color: #136cc4"
      type="primary"
      :disabled="disabled"
      @click="emits('handleSearch')"
    >
      查询
    </a-button>
    <a-button @click="handleReset" :disabled="disabled" v-if="resetHidden">重置</a-button>
  </div>
</template>

<script setup lang="ts" name="SearchGroup">
import { watch } from 'vue'

import 'dayjs/locale/zh-cn'
export interface LabelItem {
  name: string // 标签 名称
  key: string // 字段（key）键
  labelWidth?: number | string // 标签的宽度
  inputWidth?: number | string // 输入框的宽度
  selectOption?: any[] // 选项
  type?: string // 类型
  disabled?: boolean // 是否禁用
  placeholder?: string // 输入框的提示
  isNotReset?: boolean // 不需要重置的字段
  mode?: 'multiple' | 'tags' | 'combobox' // 模式
}
const props = defineProps({
  labelOption: {
    type: Array<Partial<LabelItem>>,
    default: () => [{}],
  },
  searchOption: {
    type: Object,
    default: () => {},
  },
  resetHidden: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
} as any)

function handleReset() {
  let searchOption = {}
  for (let i = 0; props.labelOption.length > i; i++) {
    let item = props.labelOption[i]
    if (item.isNotReset) searchOption[item.key] = props.searchOption[item.key]
  }
  emits('update:searchOption', searchOption)
  emits('handleReset', searchOption)
}

const emits = defineEmits(['handleSearch', 'handleReset', 'update:searchOption'])

function filterOption(index: number) {
  let labeItem = props.labelOption[index]
  return (input: string, option: any = {}) => {
    return option[labeItem?.fieldNames?.label || 'label']?.indexOf(input) >= 0
  }
}

watch(
  () => props.searchOption,
  () => {
    emits('handleSearch')
  },
  {
    deep: true,
  }
)
</script>

<style scoped lang="less">
.search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  label {
    width: 110px;
  }

  .col {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    padding: 10px 0;

    .ant-input,
    .ant-select {
      width: 80%;
    }
  }
}
</style>
